<template>
	<view class="my-banlance">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">历史收入</block>
		</cu-custom>
		<view class="data-total bg-gradual-orange shadow shadow-lg">
			<view class="effective-num">
				<view class="banlance-num"></view>
			</view>
			<view class="go-withdrawal">
				<view class="withdraw-item" v-for="item in table">

					<view @click="getRecord('entry',item.table_name)">{{item.table_time}}</view>
				</view>
			</view>
		</view>
		<view class="record-contet">

			<view class="record-list">
				<view class="apply-item" v-for="items in applyList" :key="items.id">

					<view class="apply-content">
						<view class="apply-title text-df" v-if="isActive!='entry'">提现到{{changeType(items)}}</view>
						<view class="apply-title text-df" v-else>{{items.memo?items.memo:'到账'}}</view>
						<view class="apply-time text-gray">{{items.createtime|formDates}}</view>
					</view>
					<view class="apply-status solid" :class="[changeStatus(items)]" v-if="isActive!='entry'">
						{{changeText(items)}}
					</view>
					<text class="apply-num text-red">{{items.money}}<text class="money-label">元</text></text>
				</view>
				<uni-load-more :status="more" v-if="applyList"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import banlance from '@/api/banlance';
	import user from '@/api/user';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				table_name: 'user_money_log_20250216',
				table: {},
				money: 0,
				total_money: 0,
				non_withdrawable_balance: 0,
				withdrawable_balance: 0,
				standard: 0,
				isActive: 'entry',
				type: 'entry',
				more: 'more',
				all: 0.00,
				page: 1,
				applyList: [],
				orderList: [],
			}
		},
		filters: {
			formDates(times) {
				var times = new Date(times * 1000);
				var year = times.getFullYear(); //取得4位数的年份
				var month = times.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
				var date = times.getDate(); //返回日期月份中的天数（1到31）
				var hour = times.getHours(); //返回日期中的小时数（0到23）
				var minute = times.getMinutes(); //返回日期中的分钟数（0到59）
				var second = times.getSeconds(); //返回日期中的秒数（0到59）
				return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
				// return new Date(parseInt(times) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		onLoad() {
			this.getRecord(this.isActive, this.table_name);

		},
		onShow() {
			this.getUser()
		},
		components: {
			uniLoadMore
		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),

			changeStatus() {
				return function(items) {
					switch (items.status) {
						case 1:
							return 'bg-green'
						case 2:
							return 'bg-red'
						default:
							return 'bg-black'
					}
				}
			},

			changeText() {
				return function(items) {
					switch (items.status) {
						case 1:
							return '待审核'
						case 2:
							return '已完成'
						default:
							return '已驳回'
					}
				}
			},
			changeType() {
				return function(items) {
					switch (items.types) {
						case 'wechat':
							return '微信'
						case 'weapp':
							return '微信'
						case 'alipay':
							return '支付宝'
					}
				}
			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.flag = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.flag = false
			}
		},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading'
				this.page++;
				this.getRecord(this.isActive, this.table_name);
			}
		},
		methods: {
			getUser() {

				user.index().then(res => {
					if (res.code === 1) {
						this.total_money = res.data.user.total_money;
						this.money = res.data.user.money
						this.non_withdrawable_balance = res.data.user.non_withdrawable_balance
						this.withdrawable_balance = res.data.user.withdrawable_balance
					}
				})

			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			async getRecord(type, table_name) {
				this.table_name = table_name;

				banlance.getRecord({
					page: this.page,
					tab: type,
					table_name: table_name
				}).then(res => {
					if (res.code == 1) {
						this.applyList = []
						// this.applyList = res.data.list;
						this.applyList = this.applyList.concat(res.data.list);
						this.all = res.data.num;
						this.table = res.data.table;
						console.log(this.table);
					} else {
						console.log(res);
					}
					if (res.data.list.length <= 0) {
						this.more = 'noMore';
					} else {
						this.more = 'more';
					}
				});
			},
			goDeposit() {
				uni.navigateTo({
					url: './balance'
				})
			},
			goHistory() {
				uni.navigateTo({
					url: './history'
				})
			},
			toList() {
				uni.navigateTo({
					url: '/pages/my/balance/list'
				})
			},
			goTransfer() {
				uni.navigateTo({
					url: './transferMoney'
				})
			},
			switchLab(e) {
				// if(e=='apply'){
				// 	this.isActive = 'out';
				// }else{
				// 	this.isActive = 'entry';
				// }
				if (this.isActive == e) {
					return false;
				} else {
					this.isActive = e;
					this.applyList = [];
					this.page = 1;
					this.getRecord(this.isActive);
				}

			}
		}
	}
</script>

<style lang="less">
	.my-banlance {
		background-color: #ffffff;
		font-size: 'SimHei';
		color: #ccccc;

		.data-total {
			height: 150rpx;
			padding: 0 20rpx;
			text-align: center;

			.banlance-num {
				padding-top: 35rpx;
				font-size: 50rpx;
				font-family: Source Han Sans CN;
				padding-bottom: 5rpx;
			}
		}

		.other-info {
			height: 90rpx;
			padding: 0 15rpx;
			margin-top: 15px;
			display: flex;
			justify-content: center;
		}

		.all-banlance {
			// float: left;、

			margin-right: 5px;
		}


		.record-contet {
			.record-tab {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

				.tab-item {
					width: 100%;
					color: #555555;
					font-size: 30rpx;
				}

				.income-list {
					float: left;
				}

				.spend-list {
					float: right;
				}

				.bg-grey {
					color: #fff;
				}
			}

			.record-list {
				background-color: #f7f7f7;

			}

			.list-item {
				height: 80rpx;
				padding: 0 30rpx;
				background-color: #fff;
				margin-bottom: 2rpx;
			}

			.item-cate {
				height: 80rpx;
				line-height: 80rpx;
				width: 110rpx;
				display: block;
				float: left;
				padding-right: 25rpx;
			}

			.item-content {
				display: inline-block;
				height: 80rpx;
				padding-top: 10rpx;
			}

			.item-title {
				font-size: 28rpx;
			}

			.item-time {
				font-size: 25rpx;
			}

			.item-num {
				float: right;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 550;
				font-size: 32rpx;
			}

			.apply-item {
				height: 80rpx;
				background: #ffffff;
				padding: 0 30rpx;
				margin-bottom: 3rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.apply-content {
					// float: left;
					// width: 300rpx;
				}

				.apply-status {
					height: 50rpx;
					line-height: 50rpx;
					width: 120rpx;
					text-align: center;
					display: inline-block;
					margin-top: 14rpx;
					border-radius: 12rpx;
				}

				.apply-time {
					font-size: 23rpx;
				}

				.apply-num {
					// float: right;
					width: 160rpx;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
	}

	.go-withdrawal {
		display: flex;
		/* 使用 Flexbox */
		justify-content: space-between;
		/* 平均分配 */
		gap: 10px;
		/* 每个元素之间的间距 */
	}

	.withdraw-item {
		flex: 1;
		/* 平均分配宽度 */
		text-align: center;
		/* 文字居中 */
		padding: 10px;
		/* 内边距 */
		border: 2px solid white;
		/* 白色边框 */
		// background: #007BFF;
		/* 背景色，可自行修改 */
		color: white;
		/* 字体颜色 */
		border-radius: 8px;
		/* 圆角 */
	}
</style>